<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能数据分析助手</title>
    <link rel="stylesheet" href="/css/jquery.dataTables.css">
    <link rel="stylesheet" href="/css/home.css">
    <link href="/css/layui.css" rel="stylesheet">
    <style>
        /* 嵌入 CSS 代码 */
    </style>
</head>
<body>
<div class="container">
    <div id="leftSection">
        <h2>智能数据分析助手</h2>
        <div id="chatMessages" class="chat-messages">
            <!-- 聊天消息将动态添加到这里 -->
        </div>
        <div class="chat-input">
            <input type="text" id="chatInput" placeholder="请输入分析问题...">
            <button id="sendRequestButton">发送</button>
        </div>
    </div>

    <div id="rightSection">
        <div id="container" style="height: 100%"></div>
<!--        <h2>数据展示</h2>-->
<!--        <div id="loading" style="display: none;">加载中...</div>-->
<!--        <div id="chartButtons" style="display: none;">-->
<!--            <button onclick="changeChartType('bar')">柱状图</button>-->
<!--            <button onclick="changeChartType('line')">折线图</button>-->
<!--            <button onclick="changeChartType('radar')">雷达图</button>-->
<!--            <button onclick="changeChartType('pie')">饼图</button>-->
<!--            <button onclick="changeChartType('doughnut')">环形图</button>-->
<!--        </div>-->
<!--        <div id="tableContainer">-->
<!--            <table id="dynamicTable">-->
<!--                <thead id="tableHead">-->
<!--                &lt;!&ndash; 表头将在这里动态生成 &ndash;&gt;-->
<!--                </thead>-->
<!--                <tbody id="tableBody">-->
<!--                &lt;!&ndash; 表格数据将在这里动态生成 &ndash;&gt;-->
<!--                </tbody>-->
<!--            </table>-->
<!--        </div>-->
<!--        <canvas id="myChart"></canvas>-->
    </div>

    <!-- 弹出表单 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span id="close" class="close">&times;</span>
            <h2>填写信息</h2>
            <form id="infoForm">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>
                <br><br>
                <label for="email">电子邮件:</label>
                <input type="email" id="email" name="email" required>
                <br><br>
                <button type="submit">提交</button>
            </form>
        </div>
    </div>
</div>

<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/jquery.dataTables.js"></script>
<script src="/js/chart.js"></script>
<script src="/js/layui.js"></script>
<script src="/js/index.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var chart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = 'http://192.168.0.120:8080';
    var option;

    chart.showLoading();
    $.getJSON(
        ROOT_PATH + '/manager/files/20240905/141231234123412331.json',
        function (json) {
            chart.hideLoading();
            chart.setOption(
                (option = {
                    title: {
                        text: ''
                    },
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series: [
                        {
                            type: 'graph',
                            layout: 'none',
                            data: json.nodes.map(function (node) {
                                var showLabel = node.size > 4; // 设置节点大小阈值
                                return {
                                    x: node.x,
                                    y: node.y,
                                    id: node.id,
                                    name: node.label,
                                    symbolSize: node.size,
                                    itemStyle: {
                                        color: node.color
                                    },
                                    label: {
                                        show: showLabel // 根据节点大小决定是否显示标签
                                    }
                                };
                            }),
                            edges: json.edges.map(function (edge) {
                                return {
                                    source: edge.sourceID,
                                    target: edge.targetID
                                };
                            }),
                            emphasis: {
                                focus: 'adjacency',
                                label: {
                                    position: 'right',
                                    show: true
                                }
                            },
                            roam: true,
                            lineStyle: {
                                width: 0.5,
                                curveness: 0.3,
                                opacity: 0.7
                            }
                        }
                    ]
                }),
                true
            );
        }
    );

    if (option && typeof option === 'object') {
        chart.setOption(option);
    }

    window.addEventListener('resize', chart.resize);
</script>
</body>
</html>
